<template>
	<div class="screen_wrap echarts_box flex_wrap">
		<corner></corner>
		<title1 title="不同地区在线点位水质等级分布"></title1>
		<div class="flex_body">
			<e-chart :options="option" style="height:100%"></e-chart>
		</div>
	</div>
</template>
<script>
	import { getSwapLevelData } from "@/api/bigScreen/bigScreen";
	import corner from '../public/corner'
	import title1 from '../public/title1'
	export default {
		components: {
			corner,
			title1
		},
		data() {
			return {
				option: null,
				xData: [],
				series: []
			}
		},
		mounted() {
			this.initData()
		},
		methods: {
			initData() {
				getSwapLevelData().then(res => {
					let arr = res.data.data
					let type = [
						[],
						[],
						[],
						[]
					]
					let name=['I~III','IV','V','劣V']
					for(var i = 0; i < arr.length; i++) {
						this.xData.push(arr[i].cityName)
						type[0].push(arr[i].list[0].num)
						type[1].push(arr[i].list[1].num)
						type[2].push(arr[i].list[2].num)
						type[3].push(arr[i].list[3].num)
					}
					for(var i = 0; i < type.length; i++) {
						let obj = {
							name: name[i],
							type: 'bar',
							stack: 'Tik Tok',
							barWidth: 25,
							itemStyle: {
								shadowColor: '#000',
								shadowBlur: 10,
								shadowOffsetY: 0,
								shadowOffsetX: 0
							},
							label: {
								normal: {
									show: true,
									position: 'insideRight',
									offset: [-10, 0],
									formatter: function(params) {
										if(params.value == '0') {
											return ''
										} else {
											return params.value
										}
									},
									textStyle: {
										align: 'center',
										baseline: 'middle',
										fontSize: 14,
										fontWeight: '400',
										color: '#fff',
										textShadowColor: '#000',
										textShadowBlur: '0',
										textShadowOffsetX: 1,
										textShadowOffsetY: 1,
									}
								},
							},
							data: type[i]
						}
						this.series.push(obj)
					}
					this.init()
				})
			},
			init() {
				this.option = {
					tooltip: {
						formatter: function(params) {
							return params.marker + params.name + ' ' +params.seriesName+ ' ' + params.value
						}
					},
					grid: {
						left: '5%',
						top: '16%',
						right: '5%',
						bottom: '5%',
						containLabel: true
					},
				    legend: {
				        top: '10%',
				        textStyle: {
				            color: this.$fontColor
				        }				        
				    },					
					xAxis: {
						type: 'value',
						// 右边的轴
						splitLine: {
							show: false,
							lineStyle: {
								color: 'rgba(255,255,255,0.3)'
							}
						},
						axisTick: {
							show: false
						},
						axisLine: {
							show: true
						},
						axisLabel: {
							// margin: 10,
							color: this.$fontColor,
						}
					},
					yAxis: {
						type: 'category',
						data: this.xData,
						axisLine: {
							lineStyle: {
								color: 'rgba(255,255,255,0.2)'
							}
						},
						inverse: true, //倒叙
						splitLine: {
							show: false
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							// margin: 10,
							color: this.$fontColor,
						}
					},
					// 颜色渐变   color: 'rgba(0,255,0,.8)'
					color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de'],
					series: this.series
				};
			}

		}
	}
</script>